<!DOCTYPE>
<html>
<head>
<title>Html Live Editor :: Beben Koben</title>
<script type="text/javascript">
var editboxHTML = 
'<html class="expand close">' +
'<head>' +
'<style type="text/css">' +
'.expand { width: 100%; height: 100%; }' +
'.close { border: none; margin: 0px; padding: 0px; }' +
'html,body { overflow: hidden; }' +
'<\/style>' +
'<\/head>' +
'<body class="expand close" onload="document.f.ta.focus(); document.f.ta.select();">' +
'<form class="expand close" name="f">' +
    '<textarea class="expand close" style="background:#000;color:#0f0;padding:5px 7px;" name="ta" wrap="hard" spellcheck="false">' +
'<\/textarea>' +
'<\/form>' +
'<\/body>' +
'<\/html>';
var defaultStuff = '<h1>Tutorial Blog for Stylish Blogger<\/h1>\n' +
'<p>Kopi pastekan semua kode markup HTML pada kotak ini...<\/p>';
var extraStuff = '<div style="position:absolute; margin:.3em; bottom:0em; right:0em;"><small>\n  Brought to you from the Beben Koben <a href="http://beben-koben.blogspot.com/" target="_top">developer blog<\/a>.\n<\/small><\/div>';
var old = '';
function init()
{
  window.editbox.document.write(editboxHTML);
  window.editbox.document.close();
  window.editbox.document.f.ta.value = defaultStuff;
  update();
}
function update()
{
  var textarea = window.editbox.document.f.ta;
  var d = dinamikframe.document; 

  if (old != textarea.value) {
    old = textarea.value;
    d.open();
    d.write(old);
    if (old.replace(/[\r\n]/g,'') == defaultStuff.replace(/[\r\n]/g,''))
      d.write(extraStuff);
    d.close();
  }
  window.setTimeout(update, 150);
}
</script>
</head>
<frameset resizable="yes" rows="50%,*" onload="init();">
  <!-- about:blank confuses opera, so use javascript: URLs instead -->
  <frame name="editbox" src="javascript:'';">
  <frame name="dinamikframe" src="javascript:'';">
</frameset>
</html>